<template>
    <div class="loginFrom">
        <h3>CRM客户关系管理系统</h3>
        <h6>Customer relationship management system</h6>
        <el-divider />
        <!-- 账号 -->
        <el-form ref="loginDataRef" :model="loginData" status-icon :rules="rules" class="demo-ruleForm " v-if="isLoginSms">
            <el-form-item prop="username">
                <el-input prefix-icon="" v-model="loginData.username" autocomplete="off">
                    <template #prefix>
                        <i class="iconfont icon-zhanghao iconStylus"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginData.password" autocomplete="off">
                    <template #prefix>
                        <i class="iconfont icon-mima iconStylus"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button :loading="loadingLogin" type="primary" @click="submitLoginForm">登录</el-button>
            </el-form-item>
            <el-form-item prop="RememberPassword">
                <el-radio-group>
                    <el-checkbox label="忘记密码">忘记密码</el-checkbox>
                </el-radio-group>
                <el-link>忘记密码</el-link>|
                <el-link @click="smslogin">短信登录</el-link>
            </el-form-item>
        </el-form>
        <!-- 短信 -->
        <el-form ref="loginSmsDataRef" :model="loginSmsData" status-icon :rules="Smsrules" class="demo-ruleForm " v-else>
            <el-form-item prop="phone">
                <el-input prefix-icon="" v-model="loginSmsData.phone" autocomplete="off">
                    <template #prefix>
                        <i class="iconfont icon-zhanghao iconStylus"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="VerificationCode">
                <el-input class="canvas-input-class" size="large" type='text' placeholder="验证码" v-model="loginSmsData.code">
                </el-input>
                <codeVue @on-canvas-value="onCanvasValue" />
            </el-form-item>
            <el-form-item>
                <el-button :loading="loadingLogin" type="primary" @click="submitLoginSmsForm">登录</el-button>
            </el-form-item>
            <el-form-item prop="RememberPassword">
                <el-radio-group>
                    <el-checkbox label="忘记密码">忘记密码</el-checkbox>
                </el-radio-group>
                <el-link>忘记密码</el-link>|
                <el-link @click="smslogin">账号登录</el-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import useUserStore from '@/stores/user';
import { errorMessage } from '@/utils/Tools/errorMessage';
import codeVue from '@/views/Login/ui/code.vue'
//切换登录
const isLoginSms = ref(true)
const smslogin = () => {
    isLoginSms.value = !isLoginSms.value
}


//登录数据
//账号
const loginData = reactive({
    username: 'admin',
    password: 'admin888',
})

// 定义数据
const loginDataRef = ref<FormInstance>()

//登录loding
const loadingLogin = ref(false)

const router = useRouter()
const userStore = useUserStore()


//表单验证
const rules = reactive<FormRules<typeof loginData>>({
    username: [{ required: true, whitespace: true, message: "账号不能为空", trigger: 'blur' }],
    password: [{ required: true, whitespace: true, message: "密码不能为空", trigger: 'blur' }],
})
//登录按钮
const submitLoginForm = () => {
    if (!loginDataRef.value) return
    loadingLogin.value = true
    loginDataRef.value.validate(async (valid) => {
        if (valid) {
            //成功处理
            let code = await userStore.USERLOGINACTION(loginData)
            if (code === 200) {
                router.replace("/")
            } else {
                errorMessage('账号或密码错误，请重新登陆', () => {
                    loadingLogin.value = false
                    loginData.password = ""
                    loginData.username = ""
                }, 3000)
            }
        }
        else {
            //表单验证失败
            errorMessage('请认真填写数据', () => {
                loadingLogin.value = false
            }, 2000)
        }
    })

}
//短信
const loginSmsDataRef = ref<FormInstance>()
const loginSmsDataCode = ref<string>("")
const loginSmsData = reactive({
    phone: "12345678908",
    code: ""
})
const validateUserCode = (rule: any, value: string, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the Username'))
    } else {
        if (value !== loginSmsDataCode.value) {
            callback(new Error('Verification code error'))
        }
        else {
            callback()
        }
    }
}
const Smsrules = reactive<FormRules<typeof loginSmsData>>({
    phone: [{ required: true, whitespace: true, message: "电话不能为空", trigger: 'blur' }],
    code: [{ required: true, whitespace: true, message: "验证码不能为空", trigger: 'blur' },
    { validator: validateUserCode, trigger: 'blur' }],
})
const onCanvasValue = (item: string) => {
    loginSmsDataCode.value = item
    console.log(loginSmsDataCode)
}
const submitLoginSmsForm = () => {
    if (!loginSmsDataRef.value) return
    loadingLogin.value = true
    if (loginSmsData.code === loginSmsDataCode.value) {
        loginSmsDataRef.value.validate(async (valid) => {
            if (valid) {
                //成功处理
                let code = await userStore.USERLOGINACTION(loginData)
                if (code === 200) {
                    router.replace("/")
                } else {
                    errorMessage('账号或密码错误，请重新登陆', () => {
                        loadingLogin.value = false
                        loginSmsData.phone = ""
                        loginSmsData.code = ""
                    }, 3000)
                }
            }
            else {
                //表单验证失败
                errorMessage('请认真填写数据', () => {
                    loadingLogin.value = false
                }, 2000)
            }
        })
    } else {
        errorMessage('请认真填写数据', () => {
            loadingLogin.value = false
        }, 2000)
    }

}
</script>

<style lang="scss" scoped>
#codeContainer {
    width: 100px;
    height: 35px;
}

h3 {
    line-height: 40px;
    color: #1d85e1;
    text-align: center;
    font-family: "阿里妈妈东方大楷 Regular", sans-serif;
    margin-bottom: -40px;
}

h6 {
    line-height: 40px;
    text-align: center;
    color: #1d85e1;
    font-family: "阿里妈妈东方大楷 Regular", sans-serif;
    margin-bottom: -5px;
}


.el-divider {
    margin: 10px 0 20px 0;
}

.loginFrom {
    background-color: #BCDEFD;
    border-radius: 20px;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
}

.el-input {
    width: 240px;
    margin: 0 auto;
}

.el-button {
    width: 240px;
    margin: 0 auto;
}

.el-radio-group {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 10px;
}

.el-link {
    margin: 0 10px;
}

.canvas-input-class {
    width: 140px;
    padding: 0;
    margin-left: 30px;
    margin-right: 20px;
}
</style>